<template>
  <div class="Ifwarp">
    <img
      src="../assets/images/消息页/后退.png"
      alt=""
      class="reset"
      @click="handleClick"
    />
    <van-tabs v-model:active="active" line-width="20px" color="#F3D24A">
      <van-tab title="通知">
        <h4>
          <span>通知列表</span
          ><span @click="allcheck"
            ><img
              src="../assets/images/消息页/选择.png"
              alt=""
              class="ready"
            />全部已读</span
          >
        </h4>
        <div
          class="mian"
          v-for="(value, index) in informationContent.result"
          :key="value"
          @click="longClick(index)"
        >
          <img
            :src="
              index === num[index]
                ? require('../assets/images/消息页/active.png')
                : require('../assets/images/消息页/unactive.png')
            "
            alt=""
            v-if="show"
          />
          <img src="../assets/images/消息页/unactive.png" alt="" v-else />
          <div class="middle">
            <p class="title">{{ value.title }}</p>
            <p class="content">{{ value.msg }}</p>
          </div>
          <div class="right">{{ value.day }}</div>
        </div>
      </van-tab>
      <van-tab title="消息">消息</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { mapState, mapActions } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const active = ref(2);
    //消息点击
    const router = useRouter();
    const handleClick = () => {
      router.go(-1);
    };
    //全部已读
    const show = ref(true);
    let num = reactive([0, 1, 2, 3, 4, 5, 6, 7, 8]);
    if (localStorage.getItem("information")) {
      num = [false, false, false, false, false, false, false, false, false];
    }
    let informationflag = ref(0);
    //数据请求
    const allcheck = () => {
      show.value = false;
      informationflag.value = num.length;
      localStorage.setItem("information", "0");
    };
    const longClick = (index) => {
      num[index] = false;
      informationflag.value++;
      if (informationflag.value === num.length) {
        localStorage.setItem("information", "0");
      }
    };
    return {
      num,
      longClick,
      router,
      active,
      handleClick,
      show,
      allcheck,
    };
  },
  computed: {
    ...mapState({
      informationContent: (state) => state.infromation.informationContent,
    }),
  },
  methods: {
    ...mapActions(["getinformation"]),
  },
  mounted() {
    this.getinformation();
  },
};
</script>

<style lang="less">
.Ifwarp {
  position: relative;
  .reset {
    position: absolute;
    z-index: 100;
    width: 12px;
    height: 19px;
    top: 10px;
    left: 10px;
  }
  .van-tabs__nav {
    margin-left: 100px;
    width: 160px;

    .van-tab {
      margin-left: 20px;
      font-size: 16px;
    }
  }
  h4 {
    display: flex;
    height: 50px;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 600;
    color: #9a9a9a;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    padding: 0 16px;
    span {
      display: flex;
      align-items: center;
    }
  }
  .ready {
    width: 14px;
    height: 10px;
    margin-right: 5px;
  }
  .mian {
    overflow: hidden;
    padding: 20px 17px 20px 17px;
    width: 100%;
    .middle {
      float: left;
      margin-left: 10px;
      .title {
        font-size: 16px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #505050;
        line-height: 16px;
      }
      .content {
        font-size: 13px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #adadad;
        line-height: 13px;
        margin-top: 10px;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .right {
      float: right;
      margin-right: 5px;
      font-size: 12px;
      font-family: PingFangSC;
      font-weight: 400;
      color: #a8a7a7;
      line-height: 12px;
    }
    img {
      width: 33px;
      height: 37px;
      float: left;
    }
  }
}
</style>
